<!--
 * @Author: zi.yang
 * @Date: 2021-03-11 21:03:56
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-03-21 17:01:25
 * @Description: 搜索历史 组件
 * @FilePath: \vue-music\src\components\search\music-history.vue
-->
<template>
  <div class="search-history">
    <div class="search-history-head">
      <span>历史记录</span>
      <i class="iconfont icondelete" @click="handleClearHistory"></i>
    </div>
    <div class="search-history-list">
      <div v-for="(item, index) in searchHistory" :key="index" @click="handleToList(item)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  reactive, toRefs, onMounted, ref, Ref,
} from '@vue/composition-api';
// eslint-disable-next-line import/no-unresolved
import Storage from '@/components/common/storage.ts';

// handleToListFun 接口
interface iHandleToList {
  handleToList: (this: any, keyword: string) => void;
}
// handleClearHistoryFun 接口
interface iHandleClearHistoryFun {
  clickRemoveCount: Ref<number>;
  handleClearHistory: () => void;
}

const storage: Storage = new Storage();
// 绑定点击事件，当历史记录发生点击事件后，进入搜索详情页
function handleToListFun(): iHandleToList {
  function handleToList(this: any, keyword: string) {
    // 因为 keyword 在 Search 组件中是通过watch监听的,所以重复的点击是不会进行搜索的
    // 为了处理这个BUG,这里先将数据置空，在经过一定的延迟后访问数据。
    this.$emit('setKeyword', '');
    const timer = setTimeout(() => {
      this.$emit('setKeyword', keyword);
      clearTimeout(timer);
    }, 10);
  }
  return { handleToList };
}

// handleClearHistoryFun state 类型
type Tstate = {
  searchHistory: Array<string>;
};
// 清除历史记录
function handleClearHistoryFun(state: Tstate): iHandleClearHistoryFun {
  const clickRemoveCount: Ref<number> = ref(0);
  // 多次非正常清除记录点击回复
  function switchprompt(value: number) {
    switch (value) {
      case 10:
        alert('点你妈了个der,没有历史记录,别再点了。');
        break;
      case 20:
        alert('你是真TM闲,都说了没有历史记录,别再点了。');
        break;
      case 30:
        alert('你TM快去干点正事去，行吗？');
        break;
      case 40:
        alert('我是服了你了，你自己点着玩吧。');
        break;
      case 50:
        alert('数据异常，程序错误，请刷新后继续！');
        // eslint-disable-next-line no-param-reassign
        state.searchHistory = ['你', '就', '一', '大', '傻', 'B', '!'];
        clickRemoveCount.value = 0;
        break;
      default:
        break;
    }
  }
  function handleClearHistory() {
    clickRemoveCount.value += 1;
    switchprompt(clickRemoveCount.value);
    // 预先检查是否有历史记录
    if (state.searchHistory.length === 0 || clickRemoveCount.value !== 1) {
      return;
    }
    // 询问
    const cf = window.confirm('确认要删除历史记录吗？');
    if (cf === false) {
      return;
    }
    // 删除记录
    storage.removeItem({
      key: 'searchHistory',
      success: () => {
        // eslint-disable-next-line no-param-reassign
        state.searchHistory = [];
      },
    });
    clickRemoveCount.value = 0;
  }

  return {
    clickRemoveCount,
    handleClearHistory,
  };
}

export default {
  name: 'music-history',
  setup() {
    type tState = {
      searchHistory: Array<string>;
    };
    const state = reactive<tState>({
      searchHistory: [],
    });
    onMounted(() => {
      storage.getItem({
        key: 'searchHistory',
        success: (data: Array<string>) => {
          if (data === null) {
            return;
          }
          state.searchHistory = data;
        },
      });
    });

    const { handleToList } = handleToListFun();
    const { handleClearHistory, clickRemoveCount } = handleClearHistoryFun(state);
    return {
      ...toRefs(state),
      handleToList,
      clickRemoveCount,
      handleClearHistory,
    };
  },
};
</script>

<style scoped>
.search-history {
  display: flex;
  flex-direction: column;

  width: 100%;
}

.search-history > .search-history-head {
  display: flex;
  justify-content: space-between;

  margin: 0 5px;

  font-size: 16px;
}

.search-history > .search-history-head > i {
  font-size: 20px;
}

.search-history > .search-history-list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  margin: 5px 0;

  font-size: 14px;
}

.search-history > .search-history-list > div {
  height: 20px;
  margin: 5px;
  padding: 3px 10px;

  cursor: pointer;
  text-align: center;

  color: #222;
  border-radius: 15px;
  background-color: #eee;

  line-height: 20px;
}
</style>
